﻿<template>
    <div id="app">
        <Row style="height:350px;background-color:#efefef">
            <p style="text-align:center;">—————— 今日食谱 ——————</p>
            <mt-swipe :auto="0">
                <mt-swipe-item  v-for="(item,index)  in data" :key="item.id" >
                    <div style="padding-left:20px;padding-right:20px;margin-top:10px;">
                        <ul>
                            <li style="width:280px;display:block;border-radius:5px;margin:0px auto">
                                <Row>
                                    <Col span="24">
                                    <img v-if="item.imgurl==''" src="../assets/images/pic_food.png" width="100%" @click="go(item)"/>
                                    <img v-else :src="item.imgurl" width="100%" @click="go(item)" />
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="16">
                                    <p>{{item.title}} 【{{item.type}}】 </p>
                                    <p>
                                        <rate disabled v-model="item.star" />
                                    </p>
                                    </Col>
                                    <Col span="8" style="height:50px;line-height:50px;vertical-align:middle;text-align:center">
                                    <Button type="primary" shape="circle" @click="go(item)">查看</Button>
                                   
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="24">
                                    {{item.desc}}
                                    </Col>
                                </Row>
                            </li>


                        </ul>


                    </div>


                </mt-swipe-item>
            </mt-swipe>

        </Row>
    </div>
</template>

<script>
    import Bus from '../bus.js'
    export default {
        name: 'app',
        data() {
            return {

            }
        },
        components: {


        },
        props: {
            data: Array
        },
        methods:
        {
            go: function (e) {
                Bus.$emit('val', "hide");
                this.$router.push({ name: 'foodpage', params: { id: e.id } });
            }

        }

    };

</script>

<style scoped>
</style>